<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>幸运刮刮乐</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Microsoft YaHei', sans-serif;
        }
        
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            padding: 20px;
        }
        
        .container {
            width: 100%;
            max-width: 800px;
            background-color: rgba(255, 255, 255, 0.9);
            border-radius: 20px;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
            padding: 30px;
            text-align: center;
        }
        
        h1 {
            color: #333;
            margin-bottom: 20px;
            font-size: 2.5rem;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
        }
        
        .instructions {
            color: #555;
            margin-bottom: 30px;
            font-size: 1.1rem;
            line-height: 1.6;
        }
        
        .scratch-container {
            position: relative;
            margin: 0 auto 30px;
            width: 100%;
            max-width: 500px;
        }
        
        #scratchCanvas {
            width: 100%;
            height: 300px;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            cursor: pointer;
            touch-action: none;
        }
        
        .prize-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 2.2rem;
            font-weight: bold;
            color: #e74c3c;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
            z-index: -1;
            width: 100%;
            text-align: center;
        }
        
        .controls {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 20px;
        }
        
        button {
            padding: 12px 25px;
            border: none;
            border-radius: 50px;
            background: linear-gradient(to right, #6a11cb, #2575fc);
            color: white;
            font-size: 1rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        
        button:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
        }
        
        button:active {
            transform: translateY(1px);
        }
        
        .stats {
            display: flex;
            justify-content: space-around;
            margin-top: 20px;
            padding: 15px;
            background-color: rgba(0, 0, 0, 0.05);
            border-radius: 10px;
        }
        
        .stat-item {
            text-align: center;
        }
        
        .stat-value {
            font-size: 1.8rem;
            font-weight: bold;
            color: #2575fc;
        }
        
        .stat-label {
            font-size: 0.9rem;
            color: #666;
        }
        
        .result-message {
            margin-top: 20px;
            padding: 15px;
            border-radius: 10px;
            background-color: #f8f9fa;
            font-size: 1.2rem;
            color: #333;
            display: none;
        }
        
        @media (max-width: 600px) {
            h1 {
                font-size: 2rem;
            }
            
            .prize-text {
                font-size: 1.8rem;
            }
            
            .controls {
                flex-direction: column;
                align-items: center;
                gap: 10px;
            }
            
            button {
                width: 100%;
                max-width: 250px;
            }
            
            .stats {
                flex-direction: column;
                gap: 15px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>������ 幸运刮刮乐 ������</h1>
        
        <p class="instructions">用鼠标拖动刮开涂层，刮开70%以上即可看到奖品！试试你的手气吧！</p>
        
        <div class="scratch-container">
            <canvas id="scratchCanvas"></canvas>
            <div class="prize-text">恭喜您获得: <span id="prize">一等奖</span></div>
        </div>
        
        <div class="controls">
            <button id="restartBtn">再来一次</button>
            <button id="revealBtn">直接揭晓</button>
        </div>
        
        <div class="stats">
            <div class="stat-item">
                <div class="stat-value" id="scratchedPercent">0%</div>
                <div class="stat-label">已刮开区域</div>
            </div>
            <div class="stat-item">
                <div class="stat-value" id="attemptsCount">0</div>
                <div class="stat-label">尝试次数</div>
            </div>
            <div class="stat-item">
                <div class="stat-value" id="winsCount">0</div>
                <div class="stat-label">中奖次数</div>
            </div>
        </div>
        
        <div class="result-message" id="resultMessage"></div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const canvas = document.getElementById('scratchCanvas');
            const ctx = canvas.getContext('2d');
            const restartBtn = document.getElementById('restartBtn');
            const revealBtn = document.getElementById('revealBtn');
            const prizeElement = document.getElementById('prize');
            const scratchedPercentElement = document.getElementById('scratchedPercent');
            const attemptsCountElement = document.getElementById('attemptsCount');
            const winsCountElement = document.getElementById('winsCount');
            const resultMessage = document.getElementById('resultMessage');
            
            // 设置canvas尺寸
            function setCanvasSize() {
                const container = canvas.parentElement;
                canvas.width = container.offsetWidth;
                canvas.height = 300;
            }
            
            // 奖品列表
            const prizes = [
                "特等奖：1000元",
                "一等奖：500元",
                "二等奖：200元",
                "三等奖：100元",
                "四等奖：50元",
                "五等奖：10元",
                "谢谢参与"
            ];
            
            // 游戏状态
            let isDrawing = false;
            let attemptsCount = 0;
            let winsCount = 0;
            let currentPrize = '';
            
            // 初始化游戏
            function initGame() {
                setCanvasSize();
                
                // 随机选择奖品
                currentPrize = prizes[Math.floor(Math.random() * prizes.length)];
                prizeElement.textContent = currentPrize;
                
                // 绘制涂层
                drawScratchLayer();
                
                // 更新尝试次数
                attemptsCount++;
                attemptsCountElement.textContent = attemptsCount;
                
                // 隐藏结果消息
                resultMessage.style.display = 'none';
            }
            
            // 绘制刮刮乐涂层
            function drawScratchLayer() {
                // 背景图案
                const patternCanvas = document.createElement('canvas');
                const patternCtx = patternCanvas.getContext('2d');
                patternCanvas.width = 20;
                patternCanvas.height = 20;
                
                patternCtx.fillStyle = '#3498db';
                patternCtx.fillRect(0, 0, 20, 20);
                patternCtx.fillStyle = '#2980b9';
                patternCtx.fillRect(0, 0, 10, 10);
                patternCtx.fillRect(10, 10, 10, 10);
                
                const pattern = ctx.createPattern(patternCanvas, 'repeat');
                
                // 填充涂层
                ctx.fillStyle = pattern;
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                
                // 添加文字
                ctx.fillStyle = 'rgba(255, 255, 255, 0.7)';
                ctx.font = 'bold 24px Arial';
                ctx.textAlign = 'center';
                ctx.fillText('刮一刮', canvas.width / 2, canvas.height / 2);
                
                // 添加边框
                ctx.strokeStyle = '#7f8c8d';
                ctx.lineWidth = 5;
                ctx.strokeRect(0, 0, canvas.width, canvas.height);
            }
            
            // 获取鼠标/触摸位置
            function getPosition(e) {
                const rect = canvas.getBoundingClientRect();
                const scaleX = canvas.width / rect.width;
                const scaleY = canvas.height / rect.height;
                
                if (e.type.includes('touch')) {
                    return {
                        x: (e.touches[0].clientX - rect.left) * scaleX,
                        y: (e.touches[0].clientY - rect.top) * scaleY
                    };
                } else {
                    return {
                        x: (e.clientX - rect.left) * scaleX,
                        y: (e.clientY - rect.top) * scaleY
                    };
                }
            }
            
            // 开始绘制
            function startDrawing(e) {
                isDrawing = true;
                const pos = getPosition(e);
                ctx.globalCompositeOperation = 'destination-out';
                ctx.beginPath();
                ctx.arc(pos.x, pos.y, 20, 0, Math.PI * 2);
                ctx.fill();
                
                // 阻止滚动和选择文本
                e.preventDefault();
            }
            
            // 绘制中
            function draw(e) {
                if (!isDrawing) return;
                
                const pos = getPosition(e);
                ctx.globalCompositeOperation = 'destination-out';
                ctx.beginPath();
                ctx.arc(pos.x, pos.y, 20, 0, Math.PI * 2);
                ctx.fill();
                
                // 计算已刮开比例
                checkScratchedPercentage();
                
                e.preventDefault();
            }
            
            // 结束绘制
            function stopDrawing() {
                isDrawing = false;
            }
            
            // 计算已刮开比例
            function checkScratchedPercentage() {
                const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
                const pixels = imageData.data;
                let transparentPixels = 0;
                
                for (let i = 3; i < pixels.length; i += 4) {
                    if (pixels[i] === 0) {
                        transparentPixels++;
                    }
                }
                
                const scratchedPercent = (transparentPixels / (pixels.length / 4)) * 100;
                scratchedPercentElement.textContent = `${scratchedPercent.toFixed(1)}%`;
                
                // 如果刮开70%以上，自动显示全部
                if (scratchedPercent > 70) {
                    revealAll();
                    
                    // 判断是否中奖（除了"谢谢参与"都算中奖）
                    if (!currentPrize.includes("谢谢参与")) {
                        winsCount++;
                        winsCountElement.textContent = winsCount;
                        resultMessage.textContent = "恭喜您中奖了！";
                        resultMessage.style.backgroundColor = "#d4edda";
                        resultMessage.style.color = "#155724";
                    } else {
                        resultMessage.textContent = "很遗憾，这次没有中奖，下次再接再厉！";
                        resultMessage.style.backgroundColor = "#f8d7da";
                        resultMessage.style.color = "#721c24";
                    }
                    resultMessage.style.display = 'block';
                }
            }
            
            // 显示全部
            function revealAll() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                scratchedPercentElement.textContent = '100%';
            }
            
            // 事件监听
            canvas.addEventListener('mousedown', startDrawing);
            canvas.addEventListener('mousemove', draw);
            canvas.addEventListener('mouseup', stopDrawing);
            canvas.addEventListener('mouseleave', stopDrawing);
            
            // 触摸事件支持
            canvas.addEventListener('touchstart', startDrawing);
            canvas.addEventListener('touchmove', draw);
            canvas.addEventListener('touchend', stopDrawing);
            
            restartBtn.addEventListener('click', initGame);
            revealBtn.addEventListener('click', revealAll);
            
            // 初始化游戏
            initGame();
            
            // 窗口调整大小时重新设置canvas尺寸
            window.addEventListener('resize', initGame);
        });
    </script>
</body>
</html>